<!--
 * @Author: gy
 * @Date: 2019-12-24 15:13:01
 * @LastEditors  : wl
 * @LastEditTime : 2020-06-17 17:39:10
 -->
<!--  -->
<template>
  <div class="layout-content">
    <el-form ref="form" :model="form" :rules="rules" label-width="110px">
      <el-form-item label="岗位编号" prop="post_code">
        <el-input v-model="form['post_code']" placeholder="请输入岗位编号" @blur="postCodeCheck"/>
        <span class="errorText" v-show="form['checkParam']['uniquePostCode']">该岗位编号重复</span>
      </el-form-item>
      <el-form-item label="岗位名称" prop="post_name">
        <el-input v-model="form['post_name']" placeholder="请输入岗位名称" @blur="postNameCheck"/>
        <span class="errorText" v-show="form['checkParam']['uniquePostName']">该岗位名称重复</span>
      </el-form-item>
      <el-form-item label="显示顺序" prop="post_sort">
        <el-input type="number" v-model.number="form['post_sort']" placeholder="请输入显示顺序" />
      </el-form-item>
      <el-form-item label="岗位状态" prop="status">
        <el-switch
          v-model="form['status']"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="0"
          inactive-value="1">
        </el-switch>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form['remark']" placeholder="请输入备注" />
      </el-form-item>
    </el-form>
    <!-- <div class="handle-btn">
      <el-button type="primary" @click="handleConfirm">确定</el-button>
      <el-button @click="handleCancel">关闭</el-button>
    </div> -->
  </div>
</template>

<script>
import {
  checkPostCodeUnique // 岗位名、编号名唯一性
} from '@/api/api'
import SystemMixin from '@/mixins/SystemMixin'
export default {
  name: 'AddPost',
  props: {
    titles: {
      type: String,
      default: () => ''
    }
  },
  mixins: [SystemMixin],
  data() {
    return {
      form: {
        post_code: '',
        post_name: '',
        post_sort: null,
        status: '',
        remark: '',
        checkParam:{
          uniquePostCode: false,
          uniquePostName: false
        }
      },
      // checkRepeatParam: {
      //   url: '/system/api/Post/CheckPostCodeUnique',
      //   param: 'post_code',
      //   methods: 'get'
      // },
      rules: {
        post_code: [
          {
            required: true,
            message: '请输入岗位编号',
            trigger: 'blur'
          }
        ],
        post_name: [
          {
            required: true,
            message: '请输入请输入角色名称',
            trigger: 'blur'
          }
        ],
        post_sort: [
          {
            required: true,
            message: '请输入显示顺序',
            trigger: 'blur'
          }
        ],
        status: [
          {
            required: true,
            message: '请输选择状态',
            trigger: 'change'
          }
        ]
      },
      moduleHidden: false,
    }
  },
  methods: {
    //岗位编号唯一性
    async postCodeCheck() {
      if(this.form['post_code'] === '') {
        this.form['checkParam']['uniquePostCode'] = false
      } else {
        this.form['checkParam']['uniquePostCode'] = await this.checkUnique(
          '/system/api/Post/CheckPostCodeUnique',
          { 'post_code': this.form['post_code']});
      }
      // if(val === '') return false
      // clearTimeout(this.setTime);
      // this.setTime = setTimeout(() => {
      //   checkPostCodeUnique({'post_code': this.form['post_code']}).then(res => {
      //     if(res.code === 0) {
      //       if(res.data === '1') {
      //         this.form['checkParam']['uniquePostCode'] = true;
      //       }else {
      //         this.form['checkParam']['uniquePostCode'] = false
      //       }
      //     }
      //   })
      // }, 500)
    },
    // 部门名称唯一性
    async postNameCheck() {
      if(this.form['post_name'] === '') {
        this.form['checkParam']['uniquePostName'] = false
      } else {
        this.form['checkParam']['uniquePostName'] = await this.checkUnique(
          '/system/api/Post/CheckPostNameUnique',
          { 'post_name': this.form['post_name']});
      }
    },
    // handleConfirm() {
    //   this.$emit('handleConfirm', this.checkParam)
    // },
    // handleCancel() {
    //   this.$emit('handleCancel')
    // }
  },
  watch: {
    title: {
      handler(val) {
        if (val === '新增') {
          this.moduleHidden = false
        } else {
          this.moduleHidden = true
        }
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.select-depart {
  width:107px;
  line-height:34px;
  background:linear-gradient(0deg,rgba(70,127,255,1),rgba(126,166,253,1));
  box-shadow:0px 5px 7px 0px rgba(213,215,218,0.9);
  border-radius:4px;
  color:rgba(255,255,255,1);
  text-align: center;
  cursor: pointer;
}
</style>
